import { useRef } from "react";
import styles from './CustomRef.module.scss'
import UITree from './UI/UITree'
import FucApp from "./fuc/FucApp";
import Form from "./state/Form";
import LoginForm, { Accordion } from "./state/LoginForm";

export default function CoustomRef() {
    const inputRef = useRef<HTMLInputElement>(null)

    function handleClick() {
        inputRef.current?.focus();
    }

    return <>
        <div className={styles.customRef}>
            <input className={styles.inputRef} ref={inputRef} />
            <button className={styles.buttonRef} onClick={handleClick}>focus click</button>
        </div>
        <UITree />
        <FucApp />
        <Form />
        <LoginForm />
        <Accordion />
    </>
}